import React, { memo, useRef ,useEffect} from "react";
import { AskWrapper } from "./style";
import { BulbOutlined } from "@ant-design/icons";
import { Affix, Button } from "antd";
import Tabcontrol from "./child/tabcontrol";
import { renderRoutes } from "react-router-config";
import AskUser from "./child/user";
import useScrollPosition from "@/utils/scroll-position-hook";

export default memo(function AskQuestions(props) {
  const { route } = props;
  const rightRef = useRef();
  const position = useScrollPosition();

  const rightAddClass = () => {
    if (position > 500) {
      rightRef.current.classList.add("right_current");
    } else {
      rightRef.current.classList.remove("right_current");
    }
  };
  useEffect(() => {
    document.title='一片月-问答'
    rightAddClass();
  });

  return (
    <AskWrapper>
      <div className="main">
        <div className="left">
          <Tabcontrol></Tabcontrol>
        </div>
        <div className="center">{renderRoutes(route.routes)}</div>

        <div ref={rightRef} className="right">
          <AskUser></AskUser>
        </div>
      </div>
    </AskWrapper>
  );
});
